<template>
  <link rel="stylesheet" href="/assets/css/record.css" />
  <h1 class="header">消费记录</h1>
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list
      class="list"
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="item" v-for="(item, index) in list" :key="index">
        <div class="content">
          <span>消费描述：</span>
          {{ item.content }}
        </div>
        <div class="total"><span>消费金额：</span>￥{{ item.total }}</div>
        <div class="time">
          <span>消费时间：</span>{{ item.createtime_text }}
        </div>
      </div>
    </van-list>
  </van-pull-refresh>
</template>
<script setup>
import { getCurrentInstance, onMounted } from "vue";

const { proxy } = getCurrentInstance();
const list = ref([]);
const count = ref(0);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const business = proxy.$business.value;

const onLoad = () => {
  setTimeout(async () => {
    loading.value = true
    //请求成功后清除旧的数据,并取消刷新状态
    if (refreshing.value) {
        list.value = [];
        refreshing.value = false;
      }
    var result = await proxy.$POST({
      url: "business/record",
      params: { id: business.id },
    });

    if (result.code == 1) {
      
      count.value = result.data.count;
      list.value = result.data.list;
      loading.value = false;
    }

    if (list.value.length >= count.value) {
      finished.value = true;
    }
  }, 500);
};

const onRefresh = () => {
  // 清空列表数据
  finished.value = true;

  // 重新加载数据
  onLoad();
};
const quest = async () => {
  var result = await proxy.$POST({
    url: "business/record",
    params: { id: business.id },
  });

  if (result.code == 1) {
    count.value = result.data.count;
    list.value = result.data.list;
  }
};
</script>